Country
<select id="countries">
    {foreach from=$countries item=c}
        <option value="{$c.Country_id}">{$c.Country}</option>
    {/foreach}
</select> <br />

County name 
<input type="text" id="county_name" name="county"><br />
Population
<input type="text" id="county_population" name="population"><br />
Percent male
<input type="text" id="county_male" name="male"><br />
Percent urban
<input type="text" id="county_urban" name="urban"><br />

<input type="submit" value="Save" id="county_save">

<div id="county_list_container">

</div>

<div id="county_modify_container" style="display: none;">
    <div id="county_modify">
        <input type="hidden" name="id" id="county_modify_id" value="">
        Name <input type="text" name="name" id="name" value=""><br />
        Population <input type="text" name="population" id="population" value=""><br />
        Percent male <input type="text" name="male" id="male" value=""><br />
        Percent urban <input type="text" name="urban" id="urban" value=""><br />
        <input type="submit" value="Save" id="county_modify_save">
    </div>
</div>

<script>

$(document).ready( function()
{
    function county_refresh()
    {
        $('#county_list_container').block( { message: 'Please wait...' } );
        $.post( 
            '/location/county-list',
            '',
            function( s, t )
            {
                $('#county_list_container').html( s['data']['counties'] );
                county_events();
                $('#county_list_container').unblock();
            },
            'json'
        );
    }

    function county_events()
    {
        $('.county_delete').click( function( e )
        {
            e.preventDefault();
            var id = $(this).attr( 'data-id' );

            p = 'id=' + encodeURIComponent( id );

            $.post(
                '/location/county-delete',
                p,
                function()
                {
                    county_refresh();
                },
                'json'
            );
        } );

        $('.county_modify').fancybox( 
            {
                onStart : function( e )
                {
                    $('#name').val( $(e).attr( 'data-name' ) );
                    $('#population').val( $(e).attr( 'data-population' ) );
                    $('#male').val( $(e).attr( 'data-male' ) );
                    $('#urban').val( $(e).attr( 'data-urban' ) );
                    $('#county_modify_id').val( $(e).attr( 'data-id' ) );
                }
            } );
    }

    $('#county_modify_save').click( function()
    {
        var p = 'id=' + $('#county_modify_id').val() +
                '&name=' + $('#name').val() + 
                '&population=' + $('#population').val() +
                '&male=' + $('#male').val() +
                '&urban=' + $('#urban').val() +
                '&county_modify_id=' + $('#county_modify_id').val();

        $.post( 
            '/location/county-modify',
            p,
            function ( s, t )
            {
                $.fancybox.close();
                county_refresh();
            },
            'json'
        );
    } );

    county_refresh();

    function country_save()
    {
        var p = 'county=' + $('#county_name').val() +
                '&country=' + $('#countries').val() +
                '&population=' + $('#county_population').val() +
                '&male=' + $('#county_male').val() +
                '&urban=' + $('#county_urban').val();

        $.post( 
            '/location/county-add',
            p,
            function( s, t )
            {
                county_refresh();
            }
        );

        $('#county').val( '' );
    }

    $('#county_save').click( country_save );
    $('#county').keyup( function( e ){ if ( e.keyCode == '13' ) { country_save(); } } );
} );

</script>